<template>
	<view class="myInquiry">
		<view class="titleBox bbf1">
			<view class="titleBoxL">
				<view class="" @tap="show = true">
					<view class="">
						{{date ? date : '日期'}}
					</view>
					<!-- <image class="down ml8"  referrerPolicy='no-referrer' :src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" /> -->
					<image class="down ml8" src="https://wx.xtwaixie.com/img/down.png" />
				</view>
				<!-- <view class="" @tap="selectShow">
					<view class="">
						{{selectType ? selectType : '状态'}}
					</view>
					<image class="down ml8" src="https://wx.xtwaixie.com/img/down.png" />
				</view> -->
				<view class="" @tap="showType = true">
					<view class="">
						{{typeName ? typeName : '类型'}}
					</view>
					<image class="down ml8" src="https://wx.xtwaixie.com/img/down.png" />
				</view>
			</view>
			<view class="titleBoxR" @tap="goAdd()">
				<view class="">
					发布询价
				</view>
				<image src="@/static/add.png" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 89rpx;">

		</view>
		<view v-if="list.length != 0 || gc_list.length != 0">
			<view class="inquiryBox" v-for="(item, index) in gc_list" :key="index" @click="demandDetail(item.relation_id )">
				<view class="inquiryBoxTitle">
					<view class="">
						 <text class="mr5" style="color: #0239BA;"> 指定询价 </text> {{ item.created_at }}
					</view>
					<view class="" style="display:flex;align-items: center;">
						<!-- 发给：{{ item.source }} -->
						发给:<view style="max-width:200rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.relation_data.settled_company}}</view>
					</view>
				</view>
				<view class="df ac sb" style="width: 100%;height:200rpx;min-height: 200rpx;">
					<view class="left">
						<view class="spare_parts_name f13" :style="item.file.length != 0 || item.drawing.length != 0 ? 'height:calc(200rpx - 34rpx);' : '100%'">
							{{ item.spare_parts_name }}
						</view>
						<view class="orderNum mt5 f13" v-if="item.file.length != 0 || item.drawing.length != 0">
							附件: <text style="text-decoration: underline;">{{ item.file.length + item.drawing.length }}</text>
						</view>
					</view>
					<view class="right df " style="flex-direction: column;justify-content: space-between;">
						<view style="color:#A2AAB7">{{item.status_title}}</view>
						<!-- un_read -->
						<view :class=" item.is_read === 0 ? 'orderBtn2 mb5 un_read' : 'orderBtn2 mb5' ">
							查看询价
						</view>
					</view>
				</view>
			</view>
			
			<view class="inquiryBox" v-for="(item, index) in list" :key="index" @click="demandDetails(item)">
				<view class="inquiryBoxTitle">
					<view class="">
						<text class="mr5" style="color: #0239BA;"> 大厅询价 </text> {{ item.created_at }}
					</view>
					<view class="">
						浏览量:{{ item.views }}
					</view>
					<view class="" v-if="item.is_quotation === 0">
						查看联系方式:{{ item.vcount }}
					</view>
					<view class="" v-else>
						已获报价:{{ item.quotation_count }}
					</view>
				</view>
				<view class="">
					<view class="orderBox">
						<view class="orderTitle">{{ item.spare_parts_name }}</view>
						<view class="orderType" style="color:#F00" v-if="item.is_deal == 1">已完成</view>
						<view class="orderType" style="color:#03E500" v-else-if="item.status == 1">报价中</view>
						<view class="orderType c10" v-else-if="item.status == 2">待审核</view>
						<view class="orderType" style="color:#F00" v-else-if="item.status == 3">已驳回</view>
						<view class="orderType c9d" v-else-if="item.status == 4">已完成</view>
						<view class="orderType c9d" style="color:#A2A8B7" v-else-if="item.status == 5">已完成</view>
					</view>
					<view class="orderBox">
						<view class="orderNum">
							数量:{{ item.count }}件
						</view>
						<view class="orderError" v-if="item.status === 3">
							原因:{{ item.reject_content }}
						</view>
					</view>
					<view class="orderBtnBox">
						<view class="orderTime">
							报价截止:{{ item.end_at }}
						</view>
						<view class="orderBtn">
							<view class="orderBtn1" @tap.stop="onDown(index)"
								v-if="item.status == 1 || item.status == 2">
								下架
							</view>
							<view class="orderBtn2" v-if="( item.status == 1 || item.status == 5 || item.status == 4 ) && item.is_quotation == 1"
								@tap.stop="seemore(item)">
								{{ item.view_quotation_count > 0 ? '查询报价(' + item.view_quotation_count + ')' : '查看报价(' + item.quotation_count + ')' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:50rpx;"></view>
		</view>
		<view class="df jc mt30" v-else style="flex-direction: column;align-items: center;">
			<image src="https://wx.xtwaixie.com/img/empty.png" style="width: 300rpx;" mode="widthFix"></image>
			<view class=""
				style="font-weight: bold;font-size: 32rpx;margin-top: 50rpx;margin-bottom:20rpx;color: #6b758c;">
				暂未发布过询价
			</view>
			<view class=""
				style="font-size: 28rpx;margin-bottom:50rpx;color: #6b758c;width: 400rpx;text-align: center;line-height: 1.3;">
				您发布过的询价单将会展示在这里以便您对询单进行管理
			</view>
			<view class=""
				style="width: 400rpx;line-height: 80rpx;text-align: center;background-color: #0239BA;color: #FFF;border-radius: 300rpx;font-size: 32rpx;font-weight:bold;"
				@tap="goAdd()">
				立即发布询价
			</view>
		</view>
		
		<!-- 需求下架 -->
		<van-popup :show="showDown" round>
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500 tc" style="padding: 0px 30rpx;">下架后无法继续获得供应商报价。<br>确认后状态变更为“已完成”</span>
			</p>
			<view class="df ac btf1 h48 mt15">
				<p class="w50 tc f16 c28" @tap.native="showDown = false">取消</p>
				<button class="share-but1 h48 c10" @tap="downDemand">下架</button>
			</view>
		</van-popup>
		<!-- <van-popup :show="showSelect" @close="onClose" position="top">
			<view class="">
				<scroll-view :style="{height:`${status_arr.length * 96}rpx`}" :scroll-y="true">
					<ul class="db">
						<block v-for="(item, index) in status_arr" :key="index">
							<li class="pd015 h48 df ac sb" @tap.native="onTabs(item.name,item.status)">
								<p :class="'f14 c28 ' + (item.name === selectType ? 'c10' : '')">{{ item.name }}</p>
								<image class="sel" src="https://wx.xtwaixie.com/img/sel.png" v-if="item.name === selectType" />
							</li>
						</block>
					</ul>
				</scroll-view>
			</view>
		</van-popup> -->
		<van-popup :show="showType" @close="onClose" position="top">
			<view class="">
				<scroll-view :style="{height:`${type_arr.length * 96}rpx`}" :scroll-y="true">
					<ul class="db">
						<block v-for="(item, index) in type_arr" :key="index">
							<li class="pd015 h48 df ac sb" @tap.native="onType(item)">
								<p :class="'f14 c28 ' + (item === typeName ? 'c10' : '')">{{ item }}</p>
								<image class="sel" src="https://wx.xtwaixie.com/img/sel.png" v-if="item === typeName" />
							</li>
						</block>
					</ul>
				</scroll-view>
			</view>
		</van-popup>
		<van-popup :show="show" round position="bottom">
			<van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :max-date="maxDate" @confirm='input($event,0)'
				@cancel='cancel' title='开始时间' />
		</van-popup>
		<van-popup :show="showsecondTime" round position="bottom">
			<van-datetime-picker type="date" :value="currentDates" :min-date="minDates" :max-date="maxDate" @confirm='input($event,1)'
				@cancel='cancel' title='截止时间' />
		</van-popup>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data() {
			return {
				currentDate: new Date().getTime(),
				currentDates: '',
				minDates: '',
				firstTime: '',
				secondTime: '',
				showsecondTime: false,
				type: 1,
				show: false,
				date: '',
				selectType: '',
				typeName:'',
				showType:false,
				minDate: new Date(2022, 0, 1).getTime(),
				maxDate: new Date().getTime(),
				status_arr: ['所有订单', '报价中', '已完成', '已驳回'],
				status:0,
				type_arr:['所有询价','工厂询价','大厅询价'],
				showSelect: false,
				page: 1,
				pagesize: 10,
				list: [],
				index: 0,
				showDown: false,
				pageTotal:0,
				gc_pageTptal:0,
				gc_list:[],
				gc_page:1,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.list = []
			this.page = 1
			let token = uni.getStorageSync('token')
			if (token) {
				this.getList();
				this.getGcList()
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			const flag = this.typeName == '' || this.typeName == '工厂询价'
			console.log(flag)
			if(this.gc_pageTptal > this.gc_page && flag){
				this.gc_page++
				this.getGcList()
			} else if(this.pageTotal > this.page && !flag){
				this.page++
				this.getList();
			} else {
				uni.showToast({
					title: '没有更多了~',
					icon: 'none'
				});
			}
		},
		methods: {
			onClose(){
				this.showSelect = false
				this.showType = false
			},
			cancel(){
				this.show = false
				this.showsecondTime = false
			},
			seemore(e) {
				if(e.quotation_count != 0){
					uni.navigateTo({
						url: "/pages/receivedQuotation/receivedQuotation?id=" + e.id
					})
				}else{
					uni.showToast({
						title:"暂无报价",
						icon:"none"
					})
				}

			},
			goPage(url, id) {
				uni.navigateTo({
					url: id ? url + '?id=' + id : url,
				})
			},
			demandDetail(id){
				uni.navigateTo({
					url: "/subPack/receivedInquiry/inquiryDetail?id=" + id + '&pages=我的询价'
				})
			},
			demandDetails(e) {
				uni.navigateTo({
					url: "/pages/demand/demandDetails?type=user&id=" + e.id + '&nameType=purchaser'
				})
			},
			input(e, i) {
				var date = new Date(e.detail); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate();
				if (i === 0) {
					this.currentDates = e.detail
					this.minDates = e.detail
					this.firstTime = Y + M + D
					this.show = false
					this.showsecondTime = true
				} else {
					this.secondTime = Y + M + D
					this.showsecondTime = false
					this.date = `${this.firstTime} - ${this.secondTime}`

					if(this.typeName == '工厂询价'){
						this.empty()
						this.getGcList()
					} else if(this.typeName == '大厅询价'){
						this.empty()
						this.getList()
					} else {
						this.empty()
						this.getGcList()
						this.getList()
					}
				}
			},
			
			getGcList(){
				let status = 0
				if (this.selectType) {
					let arrList = {
						'所有订单': 0,
						'报价中': 1,
						'已完成': 2,
						'已驳回': 3
					}
					status = arrList[this.selectType]
				} else {
					status = 0
				}
				console.log(status);
				let data = {
					page: this.gc_page,
					pagesize: 10,
					// time: this.date,
					type: 6,
					// province: '',
					// city: '',
					demand_status:this.status,
					start_date:this.firstTime,
					end_date:this.secondTime
				};
				// /api/user/collectList
				http.request('user/collectList', data)
					.then((res) => {
					res.data.list.forEach((i) => {
						this.gc_list.push({
							...i.relation_data,
							...i
						});
						console.log(this.gc_list)
					});
					this.gc_pageTptal = this.calculateTotalPages(res.data.total,10)
				})
				.catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			
			getList() {
				let status = 0
				if(this.selectType){
					let arrList = {
						'所有订单': 0,
						'报价中': 1,
						'已完成': 2,
						'已驳回': 3
					}
					status = arrList[this.selectType]
				}else{
					status=0
				}
				console.log(status);
				let data = {
					page: this.page,
					pagesize: 10,
					status:this.status,
					time:this.date
				};
				http.request('user/myDemand', data)
					.then((res) => {
						if(this.page == 1){
							this.list = res.data.list
						}else{
							res.data.list.forEach((i) => {
								this.list.push(i);
							});
						}

						this.pageTotal = res.data.pageTotal
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},
			calculateTotalPages(total,itemsPerPage){
				return Math.ceil(total / itemsPerPage);
			},
			timeChange(e) {
				let y = e.getFullYear()
				let m = e.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				let d = e.getDate()
				d = d < 10 ? ('0' + d) : d
				return y + '-' + m + '-' + d;
			},
			onTabs(e,s) {
				console.log(e);
				this.selectType = e
				
				this.status = s
				if(this.typeName == '指定询价'){
					this.empty()
					this.getGcList()
				} else if(this.typeName == '大厅询价'){
					this.empty()
					this.getList()
				} else {
					this.empty()
					this.getGcList()
				}
				this.showSelect = false
			},
			empty(){
				this.gc_list = []
				this.gc_page = 1
				this.page = 1
				this.list = []
			},
			selectShow(){
				if(this.typeName == '' || this.typeName == '所有询价'){
					uni.showToast({
						title:'请先选择订单类型',
						icon:'none'
					})
					return
				}
				this.showSelect = true
			},
			onType(e){
				this.typeName = e
				this.showType = false
				console.log(e)
				if(e === '大厅询价'){
					this.empty()
					this.getList()
					this.status_arr = [
						{
							name:'报价中',
							status:1,
						},
						{
							name:'已完成',
							status:2,
						},
						{
							name:'已驳回',
							status:3,
						},
					]
				} else if( e =='工厂询价'){
					this.empty()
					this.getGcList()
					this.status_arr = [
						{
							name:'审核中',
							status:1,
						},
						{
							name:'已通过',
							status:2,
						},
						{
							name:'已驳回',
							status:3,
						},
					]
				} else {
					this.empty()
					this.getGcList()
					this.getList()
				}
				this.selectType = ''
				this.status = 0
				
				// this.getList()
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/demand/subDemand'
				})
			},
			onDown(index) {
				this.index = index
				this.showDown = true
			},
			// 下架
			downDemand() {
				let data = {
					id: this.list[this.index].id
				};
				http.request('user/downDemand', data)
					.then((res) => {
						if(this.list[this.index].status == 2){
							this.list[this.index].status = 3
							this.list[this.index].reject_content = '自助下架订单'
						}else{
							this.list[this.index].status = 4
						}
						this.showDown = false
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FC;
	}

	.myInquiry {
		.inquiryBox {
			width: 700rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			background-color: #FFF;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;

			.inquiryBoxTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #EBEBED;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;

				view {
					font-size: 26rpx;
					color: #9DA2B6;
				}
			}

			.orderBtnBox {
				display: flex;
				justify-content: space-between;

				.orderTime {
					font-size: 24rpx;
					color: #9DA2B6;
				}

				.orderBtn {
					display: flex;
					align-items: center;

					.orderBtn1 {
						padding: 5rpx 20rpx;
						border: 2rpx solid #0239BA;
						border-radius: 10rpx;
						color: #0239BA;
						font-size: 28rpx;
						font-weight: bold;
					}

					.orderBtn2 {
						border: 2rpx solid #0239BA;
						padding: 5rpx 20rpx;
						border-radius: 10rpx;
						color: #FFF;
						margin-left: 20rpx;
						font-size: 28rpx;
						font-weight: bold;
						background-color: #0239BA;

					}
				}
			}

			.orderBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 15rpx;

				.orderTitle {
					font-size: 28rpx;
					color: #000;
					font-weight: bold;
				}

				.orderType {
					font-size: 30rpx;
					font-weight: bold;
				}

				.orderNum {
					font-size: 24rpx;
					color: #9DA2B6;
				}

				.orderError {
					font-size: 28rpx;
					color: #F00;
					font-weight: bold;
				}
			}
		}

		.titleBox {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			top: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			height: 88rpx;
			padding: 0 25rpx;
			background-color: #FFF;

			.titleBoxL {
				display: flex;
				align-items: center;

				>view {
					width: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						color: #6b758c;
						font-size: 28rpx;
						overflow: hidden;
						/*   超出容器的部分影响  */
						white-space: nowrap;
						/*  文本不换行   */
						text-overflow: ellipsis;
						/*  超出容器的文本显示省略号  */
					}
				}
			}

			.titleBoxR {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #0239BA;
				color: #FFF;
				padding: 5rpx;
				padding-left: 10rpx;
				border-radius: 50rpx;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-left: 5rpx;
				}

				view {
					font-size: 28rpx;
				}
			}
		}

		.share-but1 {
			width: 50% !important;
			font-size: 32rpx;
			padding: 0 !important;
			margin: 0 !important;
			font-weight: 400;
			text-align: center;
			color: #283043;
			line-height: 96rpx;
			border-left: 1rpx solid #ebedf0;
		}
	}
	.myInquiry {
		.inquiryBox {
			width: 700rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			background-color: #FFF;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
	
			.inquiryBoxTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #EBEBED;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
	
				view {
					font-size: 26rpx;
					color: #9DA2B6;
				}
			}
	
			.orderBtnBox {
				display: flex;
				justify-content: space-between;
	
				.orderTime {
					font-size: 24rpx;
					color: #9DA2B6;
				}
	
				.orderBtn {
					display: flex;
					align-items: center;
	
					.orderBtn1 {
						padding: 5rpx 20rpx;
						border: 2rpx solid #0239BA;
						border-radius: 10rpx;
						color: #0239BA;
						font-size: 28rpx;
						font-weight: bold;
					}
	
				}
			}
	
			.orderBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 15rpx;
	
				.orderTitle {
					font-size: 28rpx;
					color: #000;
					font-weight: bold;
				}
	
				.orderType {
					font-size: 30rpx;
					font-weight: bold;
				}
	
				
	
				.orderError {
					font-size: 28rpx;
					color: #F00;
					font-weight: bold;
				}
			}
		}
	
		.titleBox {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			top: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			height: 88rpx;
			padding: 0 25rpx;
			background-color: #FFF;
	
			.titleBoxL {
				display: flex;
				align-items: center;
	
				>view {
					width: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;
	
					view {
						color: #6b758c;
						font-size: 28rpx;
						overflow: hidden;
						/*   超出容器的部分影响  */
						white-space: nowrap;
						/*  文本不换行   */
						text-overflow: ellipsis;
						/*  超出容器的文本显示省略号  */
					}
				}
			}
	
			.titleBoxR {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #0239BA;
				color: #FFF;
				padding: 5rpx;
				padding-left: 10rpx;
				border-radius: 50rpx;
	
				image {
					width: 38rpx;
					height: 38rpx;
					margin-left: 5rpx;
				}
	
				view {
					font-size: 28rpx;
				}
			}
		}
	
		.share-but1 {
			width: 50% !important;
			font-size: 32rpx;
			padding: 0 !important;
			margin: 0 !important;
			font-weight: 400;
			text-align: center;
			color: #283043;
			line-height: 96rpx;
			border-left: 1rpx solid #ebedf0;
		}
	}
	.orderBtn2 {
		border: 2rpx solid #0239BA;
		padding: 8rpx 25rpx;
		border-radius: 10rpx;
		color: #FFF;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #0239BA;
	}
	.un_read{
		position:relative;
		&::after{
			content:'';
			width:14rpx;
			height:14rpx;
			position: absolute;
			top:8rpx;
			right:8rpx;
			background:red;
			border-radius:50%;
		}
	}
	.orderNum {
		font-size: 24rpx;
		color: #0239BA;
	}
	.left{
		width:calc(100% - 220rpx);
		height:100%;
		.spare_parts_name{
			width:100%;
			 display: -webkit-box; /* 对应 flexbox */  
			-webkit-box-orient: vertical; /* 垂直方向 */  
			-webkit-line-clamp: 4; /* 限制为四行 */  
			 overflow: hidden; /* 隐藏超出的文本 */  
			text-overflow: ellipsis; /* 省略号 */  
			line-height: 1.5; /* 行高（可根据需要调整） */  
			max-height: 6em; /* 最大高度，根据行高和行数计算 1.5 * 4 */  
		}
	}
	.right{
		margin-left: 30rpx;
		width:190rpx;
		height: 100%;
		align-items: flex-end;
	}
</style>